<template>
	<view class="container">
		<view class="header-box" :style="{ height: height + 'px', paddingTop: top + 'px' }">
			<tui-icon name="arrowleft" @tap="goBack" color="#333333" size="25" bold="true" class="goBack-icon"></tui-icon>
			<view class="header-name">人脉与关注</view>
		</view>
		<view class="user-box" v-for="(item, index) in DataList" v-if="DataList.length">
			<view class="left-box" @tap="userDetail(item.UserId)">
				<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill" class="user-Avatar"></image>
				<view class="user-info">
					<view class="user-header">
						<view class="user-name">
							{{ item.Name }}
							<span v-if="item.Gongsi">-&nbsp;{{ item.Gongsi }}</span>
						</view>
						<view class="user-rela" v-if="item.source_table == 'UserGZTJ' && item.relationShip">粉丝</view>
						<view class="user-rela" v-else-if="item.source_table == 'HaoyouApply' && item.relationShip">好友</view>
					</view>
					<view class="user-content" style="margin-bottom: 0" v-if="item.UserId == CurrentUser.Id && item.source_table == 'HaoyouApply' && item.zhuangtai == '审核中'">
						等待对方回应中
					</view>
					<view class="user-content" :style="{ color: item.UserId == CurrentUser.Id && item.source_table == 'HaoyouApply' ? '#999' : '#666' }">
						{{ item.UserId == CurrentUser.Id && item.source_table == 'HaoyouApply' ? '我：' : '' }}{{ item.content }}
					</view>
					<view class="user-time">{{ computeCreateTime(item.CreateTime) }}</view>
				</view>
			</view>
			<view class="right-box">
				<view class="add-mes" @tap="sendMsg(item)" v-if="item.source_table == 'HaoyouApply' && item.relationShip && item.UserId != CurrentUser.Id">
					<image src="/static/images/message/feiji1.png"></image>
					<view>发消息</view>
				</view>
				<view class="add-mes" v-else-if="item.source_table == 'HaoyouApply' && item.UserId != CurrentUser.Id">
					<!-- <view class="cofirm-btn" @tap="cofirmApply(index, 1)">同意</view>
					<view class="refuse-btn" @tap="cofirmApply(index, 0)">拒绝</view> -->
					<view class="cofirm-btn" @tap="lookApply(index)">查看</view>
				</view>
				<view class="user-rela" style="border: 0" v-if="item.zhuangtai != '审核中' && item.zhuangtai != '同意' && item.source_table == 'HaoyouApply'">
					{{ item.zhuangtai }}
				</view>
			</view>
		</view>
		<view v-else class="no-Data">
			<image src="/static/images/my/noData.png" mode="widthFix"></image>
			<view class="">暂无信息</view>
		</view>
	</view>
</template>

<script>
import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
export default {
	data() {
		return {
			Islogin: this.Microi.IsLogin(),
			CurrentUser: this.Microi.GetCurrentUser(),
			DataList: [],
			startTime: 0,
			options: {},
			page: 1,
			noData: false,
			height: 64, //header高度
			top: 26, //标题图标距离顶部距离
			scrollH: 0 //滚动总高度
		};
	},
	mounted() {
		let obj = {};
		// #ifdef MP-WEIXIN
		obj = wx.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-BAIDU
		obj = swan.getMenuButtonBoundingClientRect();
		// #endif
		// #ifdef MP-ALIPAY
		my.hideAddToDesktopMenu();
		// #endif

		setTimeout(() => {
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth;
					this.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					this.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					this.scrollH = res.windowWidth;
				}
			});
		}, 0);
	},

	onLoad(options) {
		this.options = options;
		this.getDataList();
	},
	onShow() {
		this.startTime = new Date();
	},
	onHide() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	onUnload() {
		if (this.Islogin) {
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面的对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面的路径
			const route = currentPage.route;
			// 获取当前页面的参数
			const options = currentPage.options;
			this.Microi.ApiEngine.Run('Add_liulanLog', {
				YemianCS: options,
				YemianDZ: route,
				LiulanSJC: new Date().getTime() - this.startTime.getTime()
			});
		}
	},
	methods: {
		async getDataList() {
			var self = this;
			var res = await self.Microi.ApiEngine.Run('get_MyRmRequest_Guanzhu', {
				YonghuID: self.CurrentUser.Id,
				page: self.page
			});
			if (!res.Data.length) {
				self.noData = true;
			}
			self.DataList.push(...res.Data);
			self.page++;
		},
		async sendMsg(item) {
			var UserSig = await this.Microi.ApiEngine.Run('get_Im_UserId', {
				Account: this.CurrentUser.Account
			});
			UserSig = UserSig.Data;
			const conversationID = `C2C${item.Account}`;
			uni.setStorageSync('receiverInfo', { userID: item.Account });
			TUIConversationService.switchConversation(conversationID);
			uni.navigateTo({
				url: '/pages/message/chatUser?YonghuID=' + item.UserId + '&conversationID=' + conversationID + '&Account=' + item.Account
			});
		},
		computeCreateTime(CreateTime) {
			var CreateTime = new Date(CreateTime).getTime();
			var TimeNow = new Date().getTime();
			var PassTime = TimeNow - CreateTime;

			var oneMinute = 60 * 1000; // 一分钟的毫秒数
			var oneHour = 60 * oneMinute; // 一小时的毫秒数
			var oneDay = 24 * oneHour; // 一天的毫秒数
			var oneMonth = 30 * oneDay; // 大约一个月的毫秒数，这里假设一个月为30天

			if (PassTime < oneMinute) {
				return '刚刚';
			} else if (PassTime < oneHour) {
				return Math.floor(PassTime / oneMinute) + '分钟前';
			} else if (PassTime < oneDay) {
				return Math.floor(PassTime / oneHour) + '小时前';
			} else if (PassTime < oneMonth) {
				return Math.floor(PassTime / oneDay) + '天前';
			} else {
				var date = new Date(CreateTime);
				return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
			}
		},
		getWindowHide() {
			var res = uni.getSystemInfoSync();
			this.windowTop = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
		},
		userDetail(Id) {
			uni.navigateTo({
				url: '/pages/my/myDetail/myDetail?Id=' + Id
			});
		},
		getMoreData() {
			if (!this.noData) {
				this.getDataList();
			} else {
				this.Microi.Tips('暂无更多', false);
			}
		},
		lookApply(index) {
			uni.navigateTo({
				url: '/pages/my/userList/userApply?Id=' + this.DataList[index].Id
			});
		},
		// type == 0 拒绝 1同意
		async cofirmApply(index, type) {
			var self = this;
			if (type == 0) {
				uni.showModal({
					title: '提示',
					content: '确定拒绝吗～',
					success: async function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '提交中',
								mask: false
							});
							var res = await self.Microi.ApiEngine.Run('apply_friends', {
								Id: self.DataList[index].Id,
								Type: type
							});
							uni.hideLoading();
							self.Microi.Tips(res.Msg, false);
							self.DataList[index].zhuangtai = '拒绝';
						}
					}
				});
			} else {
				uni.showLoading({
					title: '提交中',
					mask: false
				});
				var res = await self.Microi.ApiEngine.Run('apply_friends', {
					Id: self.DataList[index].Id,
					ShenqingRID: self.DataList[index].UserId,
					BeishenQRID: self.DataList[index].YonghuID,
					Type: type
				});
				uni.hideLoading();
				self.Microi.Tips(res.Msg, false);
				self.DataList[index].zhuangtai = '同意';
				self.DataList[index].relationShip = 1;
			}
		},
		goBack() {
			let pages = getCurrentPages(); // 获取当前页面堆栈
			let pageCount = pages.length; // 页面堆栈中的页面数量
			// 判断是否有上级页面
			if (pageCount > 1) {
				// 如果有上级页面，则返回上级页面
				uni.navigateBack({
					delta: 1
				});
			} else {
				// 如果没有上级页面，则返回首页
				uni.switchTab({
					url: '/pages/tabbar/find/find' // 替换为你的首页路径
				});
			}
		}
	},
	onReachBottom() {
		this.getMoreData();
	},
	onPullDownRefresh() {
		this.page = 1;
		this.noData = false;
		this.DataList = [];
		this.getDataList();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 500);
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.container {
	background-color: #fff;
	padding: 175rpx 20rpx 150rpx 20rpx;
	color: #000;
	box-sizing: border-box;
}

.header-box {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-bottom: 1rpx solid #f2f2f2;
	padding-bottom: 16rpx;
}
.goBack-icon {
	position: absolute;
	left: 2%;
}
.header-name {
	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 36rpx;
	color: #181818;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.header-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.header-btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20rpx;
}
.header-btn image {
	width: 44rpx;
	height: 44rpx;
}
.hearder-container {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #f4f5f6;
}

.no-Data {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-size: 25rpx;
	color: #999999;
	margin: auto;
	margin-top: 200rpx;
}
.no-Data image {
	width: 500rpx;
}
.user-box {
	width: 718rpx;
	/* height: 218rpx; */
	background: #ffffff;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border-bottom: 2rpx solid #f2f2f2;
	margin: auto;
	display: flex;
	justify-content: space-between;

	padding: 26rpx 24rpx;
	box-sizing: border-box;
}
.left-box {
	display: flex;
	gap: 32rpx;
	justify-content: flex-start;
}
.right-box {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 200rpx;
}
.add-mes {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10rpx;

	font-family: PingFang SC, PingFang SC;
	/* font-weight: 500; */
	font-size: 28rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.cofirm-btn {
	width: 90rpx;
	height: 48rpx;
	background: #FB353B;
	border-radius: 32rpx 32rpx 32rpx 32rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 26rpx;
	line-height: 48rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.refuse-btn {
	width: 90rpx;
	height: 48rpx;
	background: red;
	border-radius: 32rpx 32rpx 32rpx 32rpx;

	font-family: PingFang SC, PingFang SC;
	font-weight: 800;
	font-size: 26rpx;
	line-height: 48rpx;
	color: #ffffff;
	text-align: center;
	font-style: normal;
	text-transform: none;
}
.add-mes image {
	width: 40rpx;
	height: 40rpx;
}
.user-Avatar {
	width: 108rpx;
	height: 108rpx;
	border-radius: 50%;
}
.user-info {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	flex: 1;
}
.user-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16rpx;
}
.user-rela {
	width: 88rpx;
	height: 48rpx;
	border-radius: 32rpx 32rpx 32rpx 32rpx;
	border: 2rpx solid #999999;

	font-family: PingFang SC, PingFang SC;
	font-size: 26rpx;
	color: #999999;
	text-align: center;
	line-height: 48rpx;
	font-style: normal;
	text-transform: none;
}
.user-name {
	font-family: PingFang SC, PingFang SC;
	font-size: 25rpx;
	color: #000000;
	text-align: left;
	font-style: normal;
	text-transform: none;

	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
}
.user-content {
	margin: 20rpx 0;
	height: 40rpx;
	font-family: PingFang SC, PingFang SC;
	font-size: 25rpx;
	color: #666666;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
.user-time {
	font-family: PingFang SC, PingFang SC;
	font-size: 24rpx;
	color: #999999;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
</style>
